require('../../assets/css/index.less')
require('./play.less')
require('../../assets/js/property')
require('../../assets/font/font_3852666_7r0dooui378/iconfont.css')
const request = require('../../intils/reques')
// 定义api地址
const url = 'http://fitness.h5.itsource.cn:3701'


window.onload = () => {
    const fragments = JSON.parse(localStorage.getItem('fragments'))
    console.log(fragments);
    $('#player').src = url + fragments[0].videoUrl
    
    // 定义变量保存fragments的索引
    let index = 0
    // 定义变量保存视频的总个数
    let length=fragments.length
    // 定义一个数组储存每次视频的播放时长
    let timeArr=[]
    // 定义一个变量继续当前事件
    let time =0

    // 播放视频函数
    function play() {
        $('#player').src = url + fragments[index].videoUrl
        $('#img1').src=url+fragments[index].imgUrl
        $('#title2').textContent=fragments[index].title

        // 事件
        $('#player').addEventListener('canplay', () => {
            $('#player').play()
        })

        $('#number1').textContent=index+1
        $('#number2').textContent=length
        $('#title').textContent=fragments[index].title

    }
    play()
    // 点击pre切换到上一个视频
    $('#pre').addEventListener('click',()=>{
        index--
        if(index>=0){
            play()
        }else{
            index=length-1
            play()
        }
        reg =true
        playStop()
        // 把保存的当前播放时长保存进数组
        timeArr.push(time)



    })

    // 点击next切换到下一个视频
    $('#next').addEventListener('click',()=>{
        index++
        if(index<length){
            play()
        }else{
            index=0
            play()
        }
        reg =true
        playStop()
        // 把保存的当前播放时长保存进数组
        timeArr.push(time)
    })
    // 定义标杆
    let reg =true
    function playStop() {

        if (reg) {
            //播放
            $('#player').play()
            $('#pause').className='iconfont icon-zanting'
            
        } else {
            //暂停
            $('#player').pause()
            $('#pause').className='iconfont icon-bofang'
            $('.popon').style.display='block'
        }

        //切换标杆的值
        reg = !reg

    }
    // 点击按钮切换播放暂停
    $('#pause').addEventListener('click',playStop)
    // 进度条 'timeupdate'事件
    $('#player').addEventListener('timeupdate',()=>{
        //当前时间/总时间 = 进度条宽度/总宽度
        // 进度条宽度=当前时间/总时间*总宽度
        $('.progress').style.width=$('#player').currentTime/$('#player').duration*$('.main').clientWidth+'px'
         //把当前时间记录在time里面
         time=$('#player').currentTime

    })
    // 当前视频播放完毕,切换成播放图标
    $('#player').addEventListener('ended',()=>{
        $('#pause').className='iconfont icon-bofang'
    })
    // 点击继续训练,播放视频
    $('#goon').addEventListener('click',()=>{
        $('.popon').style.display='none'
        $('#pause').click()


    })
    // 结束训练
    $('#end').addEventListener('click',()=>{
        // 把当前页面的播放时长添加到timeArr
        timeArr.push($('#player').currentTime)
        // 计算总时长的总和
        let times=   timeArr.reduce((total,cur)=>{
            return total+cur


        },0)
        console.log(times);
        // 发请求上传运动数据
        request.post('/api/exercise/save',{
            type:2,
            duration:times,
            calorie:times*1000
        }).then(res=>{
            if(res.data.errno===0){
                location.href='./sport.html'
            }
        })

    })


}